<template>
  <div class="home all-bj">
    <div class="header">
      <div class="logo"><h1><img src="../../assets/img/home_slices/logo@2x.png" alt=""></h1></div>
      <div class="header-title">
        <img src="../../assets/img/home_slices/image_title@2x.png" alt="">
      </div>
    </div>
    <div class="btn">
      <a @click="routerPath('/topic_1')"></a>
    </div>
    <div class="bottom-img">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      locationData: ''
    }
  },
  methods: {
    loadrRequestData () {
      const data =
        {
          '场景': {
            'question': '你购买酒款是为了？',
            'fieldName': 'scene_food_id',
            'selItems': {
              'A': {'id': '2b0bf718-6bb4-11e8-9739-525400650f76', 'title': '礼节拜访', 'url': ''},
              'B': {'id': '3d114288-6bb4-11e8-9739-525400650f76', 'title': '睡前小酌', 'url': ''},
              'C': {'id': '4ae94a4a-6bb4-11e8-9739-525400650f76', 'title': '朋友聚会', 'url': ''},
              'D': {'id': '5b901036-6bb4-11e8-9739-525400650f76', 'title': '商务宴请', 'url': ''}
            }
          },
          '水果': {
            'question': '你平时喜欢吃什么水果？',
            'fieldName': 'scene_food_id',
            'selItems': {
              'A': {'id': '9ba21930-6bb4-11e8-9739-525400650f76', 'title': '黑葡萄', 'url': './static/img/Q2_slices/ic_grape@2x.png'},
              'B': {'id': 'cb6d2d30-6bb4-11e8-9739-525400650f76', 'title': '草莓', 'url': './static/img/Q2_slices/ic_Strawberry@2x.png'},
              'C': {'id': 'da97c824-6bb4-11e8-9739-525400650f76', 'title': '番石榴', 'url': './static/img/Q2_slices/ic_guava@2x.png'},
              'D': {'id': 'e916a474-6bb4-11e8-9739-525400650f76', 'title': '橘子', 'url': './static/img/Q2_slices/ic_orange@2x.png'}
            }
          },
          '风格': {
            'question': '你喜欢什么风格的葡萄酒？',
            'fieldName': 'scene_food_id',
            'selItems': {
              'A': {'id': 'fee8cd9a-6bb4-11e8-9739-525400650f76', 'title': '清新', 'url': ''},
              'B': {'id': '0abdb338-6bb5-11e8-9739-525400650f76', 'title': '柔和', 'url': ''},
              'C': {'id': '15690878-6bb5-11e8-9739-525400650f76', 'title': '饱满', 'url': ''}
            }
          },
          '配餐': {
            'question': '你选酒是为了搭配哪类食物呢？',
            'fieldName': 'scene_food_id',
            'selItems': {
              'A': {'id': '2f8f7cd2-6bb5-11e8-9739-525400650f76', 'title': '肉类:猪、牛、羊肉', 'url': './static/img/Q4_slices/ic_meat@2x.png'},
              'B': {'id': '3d242b2c-6bb5-11e8-9739-525400650f76', 'title': '禽类:鸡肉、鸭肉', 'url': './static/img/Q4_slices/ic_chicken@2x.png'},
              'C': {'id': '4d3c6ff6-6bb5-11e8-9739-525400650f76', 'title': '海鲜类:鱼、贝壳、虾蟹', 'url': './static/img/Q4_slices/ic_shell@2x.png'},
              'D': {'id': '5752f3c0-6bb5-11e8-9739-525400650f76', 'title': '素菜类', 'url': './static/img/Q4_slices/ic_vegetable@2x.png'}
            }
          },
          '价格': {
            'question': '你认为哪种价位的红酒是你最为接受的？',
            'fieldName': 'price_range',
            'selItems': {
              'A': {'id': '1-100', 'title': '100以内', 'url': ''},
              'B': {'id': '100-300', 'title': '100-300', 'url': ''},
              'C': {'id': '300-500', 'title': '300-500', 'url': ''},
              'D': {'id': '500-1000000', 'title': '500以上', 'url': ''}
            }
          }
        }

      return JSON.stringify(data)
    },
    getUrlParam (name, url) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = url.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return ''
    },
    location () {
      const that = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            var longitude = position.coords.longitude
            var latitude = position.coords.latitude
            const str = longitude + ',' + latitude
            that.locationData = str
          },
          function (e) {
            var msg = e.code
            var dd = e.message
            console.log(msg)
            console.log(dd)
          }
        )
      }
    },
    logs (opEvent) {
      const that = this
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': opEvent,
        'query_column': location.href,
        'source': this.getUrlParam('source', location.href),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      console.log(logs)
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      this.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
    },
    routerPath (path) {
      this.logs('开始选酒')
      this.$router.push(path)
    }
  },
  mounted () {
    sessionStorage.setItem('requestData', this.loadrRequestData())
    sessionStorage.removeItem('options')
    this.location()
    this.logs('进入活动页面')
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
.home{
  .header{
    width: 100%;
    .logo{
      text-align: center;
      .pt(35);
      .pb(10);
      img{
        width: 23.5%;
        object-fit: cover;
      }
    }
    .header-title{
    width: 100%;
      margin: 0 auto;
      text-align: center;
      img{
        width: 85.33%;
        object-fit: cover;
      }
    }

  }
  .btn{
    width: 100%;
    .pt(40);
    text-align: center;
    position: relative;
    z-index: 99;
      a{
        display: inline-block;
        text-align: center;
        .w(120);
        .h(60);
        background: url("../../assets/img/button_status/btn_start@2x.png") no-repeat center;
        background-size: contain;
        background-clip: border-box;
        position: absolute;
        left: 50%;
        .top(-30);
        .ml(-60);
        .pt(100)
      }
  }
  .bottom-img{
    width: 100%;
    .h(153);
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../../assets/img/home_slices/bottomimage_index@2x.png")no-repeat bottom center;
    background-size: contain;
  }
  @media screen and (min-width: 750px) {
    .bottom-img {
     display: none;
    }
  }
}
</style>
